<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Login</title>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        body {-->
<!--            min-height: 100vh;-->
<!--            background: rgb(20, 172, 231);-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            transition: 0.5s;-->
<!--        }-->

<!--        body.active {-->
<!--            background: #f43648;-->
<!--        }-->

<!--        .container {-->
<!--            position: relative;-->
<!--            width: 800px;-->
<!--            height: 500px;-->
<!--            /* background: red; */-->
<!--            margin: 20px;-->
<!--        }-->

<!--        .blueBg {-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            position: absolute;-->
<!--            top: 40px;-->
<!--            width: 100%;-->
<!--            height: 420px;-->
<!--            background: rgba(255, 255, 255, 0.2);-->
<!--            box-shadow: 0 5px 45px rgba(0, 0, 0, 0.15);-->
<!--        }-->

<!--        .blueBg .box {-->
<!--            position: relative;-->
<!--            width: 50%;-->
<!--            height: 100%;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            flex-direction: column;-->
<!--        }-->

<!--        .blueBg .box h2 {-->
<!--            color: #fff;-->
<!--            font-size: 1.2em;-->
<!--            font-weight: 500;-->
<!--            margin-bottom: 10px;-->
<!--        }-->

<!--        .blueBg .box button {-->
<!--            cursor: pointer;-->
<!--            padding: 10px 20px;-->
<!--            background: #fff;-->
<!--            color: #333;-->
<!--            font-size: 16px;-->
<!--            font-weight: 500;-->
<!--            border: none;-->
<!--        }-->

<!--        .formBx {-->
<!--            position: absolute;-->
<!--            top: 0;-->
<!--            left: 0;-->
<!--            width: 50%;-->
<!--            height: 100%;-->
<!--            background: #fff;-->
<!--            z-index: 999;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);-->
<!--            transition: 0.5s ease-in-out;-->
<!--            overflow: hidden;-->
<!--        }-->

<!--        .formBx.active {-->
<!--            left: 50%;-->
<!--        }-->

<!--        .formBx .form {-->
<!--            position: absolute;-->
<!--            left: 0;-->
<!--            width: 100%;-->
<!--            padding: 50px;-->
<!--            transition: 0.5s;-->
<!--        }-->

<!--        .formBx .form form {-->
<!--            display: flex;-->
<!--            width: 100%;-->
<!--            flex-direction: column;-->
<!--        }-->

<!--        .formBx .signinForm {-->
<!--            transition-delay: 0.25s;-->
<!--        }-->

<!--        .formBx.active .signinForm {-->
<!--            left: -100%;-->
<!--            transition-delay: 0s;-->
<!--        }-->

<!--        .formBx .signupForm {-->
<!--            left: -100%;-->
<!--            transition-delay: 0.25s;-->
<!--        }-->

<!--        .formBx.active .signupForm {-->
<!--            left: 0;-->
<!--            transition-delay: 0s;-->
<!--        }-->

<!--        .formBx .form form h3 {-->
<!--            font-size: 1.5em;-->
<!--            color: #333;-->
<!--            margin: 20px;-->
<!--            font-weight: 500;-->
<!--        }-->

<!--        .formBx .form form input {-->
<!--            width: 100%;-->
<!--            margin-bottom: 20px;-->
<!--            padding: 10px;-->
<!--            outline: none;-->
<!--            font-size: 16px;-->
<!--            border: 1px solid #333;-->
<!--        }-->

<!--        .formBx .form form input[type="submit"] {-->
<!--            background: #03a9f4;-->
<!--            border: none;-->
<!--            color: #fff;-->
<!--            max-width: 100px;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .formBx.active .signupForm input[type="submit"] {-->
<!--            background: #f43648;-->
<!--        }-->

<!--        .formBx .form form .forget {-->
<!--            color: #333;-->
<!--            /* text-decoration: none; */-->
<!--        }-->

<!--        @media (max-width: 991px) {-->
<!--            .container {-->
<!--                max-width: 400px;-->
<!--                height: 650px;-->
<!--                display: flex;-->
<!--                justify-content: center;-->
<!--                align-items: center;-->
<!--            }-->

<!--            .container .blueBg {-->
<!--                top: 0;-->
<!--                height: 100%;-->
<!--            }-->

<!--            .formBx {-->
<!--                width: 100%;-->
<!--                height: 500px;-->
<!--                top: 0;-->
<!--                box-shadow: none;-->
<!--            }-->

<!--            .blueBg .box {-->
<!--                position: absolute;-->
<!--                width: 100%;-->
<!--                height: 150px;-->
<!--                bottom: 0;-->
<!--            }-->

<!--            .box.signin {-->
<!--                top: 0;-->
<!--            }-->

<!--            .formBx.active {-->
<!--                left: 0;-->
<!--                top: 150px;-->
<!--            }-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="container">-->
<!--    <div class="blueBg">-->
<!--        <div class="box signin">-->
<!--            <h2>已经有一个账号?</h2>-->
<!--            <button class="signinBtn">登录</button>-->
<!--        </div>-->
<!--        <div class="box signup">-->
<!--            <h2>没有账号?</h2>-->
<!--            <button class="signupBtn">注册</button>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="formBx">-->
<!--        <div class="form signinForm">-->
<!--            <form action="">-->
<!--                <h3>登录</h3>-->
<!--                <input type="text" placeholder="用户名">-->
<!--                <input type="password" placeholder="密码">-->
<!--                <input type="submit" value="登录">-->
<!--                <a href="#" class="forget" style="text-decoration: none">忘记密码</a>-->
<!--            </form>-->
<!--        </div>-->
<!--        <div class="form signupForm">-->
<!--            <form action="">-->
<!--                <h3>注册</h3>-->
<!--                <input type="text" placeholder="用户名">-->
<!--                <input type="text" placeholder="电子邮箱">-->
<!--                <input type="password" placeholder="密码">-->
<!--                <input type="password" placeholder="确认密码">-->
<!--                <input type="submit" value="注册">-->
<!--            </form>-->
<!--        </div>-->

<!--    </div>-->
<!--</div>-->
<!--<script>-->
<!--    const signinBtn = document.querySelector('.signinBtn');-->
<!--    const signupBtn = document.querySelector('.signupBtn');-->
<!--    const formBx = document.querySelector('.formBx');-->
<!--    const body = document.querySelector('body');-->

<!--    signupBtn.onclick = function () {-->
<!--        formBx.classList.add('active');-->
<!--        body.classList.add('active');-->
<!--    }-->
<!--    signinBtn.onclick = function () {-->
<!--        formBx.classList.remove('active');-->
<!--        body.classList.remove('active');-->
<!--    }-->
<!--</script>-->
<!--</body>-->
<!--</html>-->